<template>
	<div>
		<br />
		<el-card style="width: 50%;">
			<el-form ref="form" :model="form" label-width="100px">
						  
						  <el-form-item label="上传二维码">
								<!-- <el-button size="mini" @click="isShow=true" type="primary">选择图片</el-button>
								 -->
								 <div style="width: 500px;">
									 <el-upload
									   class="upload-demo"
										:headers="headers"
										drag
										:on-success="successFile"
										:on-progress="progressFile"
										:action="action"
										:data="params"
									   >
									   <i class="el-icon-upload"></i>
									   <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
									   <!-- <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div> -->
									 </el-upload>
									 <el-progress :percentage="percent"></el-progress>
								 </div>
								 
						  </el-form-item>
						  <el-form-item>
							  <div style="display: flex;flex-wrap: wrap;">
								  <div style="position: relative;margin-right: 10px;" v-if="groupCode">
									  <img style="width: 100px;height: 100px;" :src="groupCode" alt="">
									  <i @click="delCode" class="el-icon-circle-close" style="font-size: 20px;position: absolute;top: 0;right:0;cursor: pointer;"></i>
								  </div>
							  </div>
						  </el-form-item>
						  <!-- <el-form-item >
							  <el-button type="primary" @click="confirm" size="small">确定</el-button>
						  </el-form-item> -->
			</el-form>
		</el-card>	
		  
	</div>
</template>

<script>
	export default {
		data(){
			return {
				form:{
					
				},
				groupCode:'',
				action:'',
				percent:0,
				params:{
					cid:"",
				},
				headers:{
					Authorization:""
				}
			}
		},
		mounted() {
			if(this.$env=='dev'){
				this.action = this.$domain + '/uplodeFile/uplodeImageLocal'
			}else{
				this.action = this.$domain + '/uplodeFile/uplodeImage'
			}
			this.params.cid = sessionStorage.getItem('cid')
			this.headers.Authorization = sessionStorage.getItem('token')+'_'+sessionStorage.getItem('cid')
			this.getGroupCode()
		},
		methods:{
			successFile(response, file, fileList){
				if(response.code==200){
					this.groupCode = response.data.img_url
					this.confirm()
				}else{
					this.$message.error(response.msg)
				}
				this.percent = 0
			},
			progressFile(event, file, fileList){
				let percent = event.percent
				this.percent = percent
			},
			confirm(){
				let params = {
					groupCode:this.groupCode,
				}
				this.$post('/homeSet/addGroupCode',params,res=>{
					this.$message.success('操作成功')
				})
			},
			getGroupCode(){
				this.$post('/homeSet/getGroupCode',{},res=>{
					this.groupCode = res.data.data
				})
			},
			delCode(){
				this.groupCode=''
				this.confirm()
			},
		}
	}
</script>

<style>
</style>